8d:I[903690,["/chat-static/_next/static/chunks/1j0feqpmh6fhf.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/30d-un2oicmhe.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0_e8e66vbc81m.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1akodtrb0t-27.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0titma9j-a7ar.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1w6dk50xuzfko.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2cz8wkga9-dqm.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/00pyugee8ly1v.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0xwyo-vptg1nc.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2gy-n7s6f83ds.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/112qjy1w8koap.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0sx9749urv_93.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/10gppqriqmn8w.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2jnp9xm5999w6.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2tvg21ifnp81e.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm"],"ExplicitChatIdProvider"] 8e:I[838238,["/chat-static/_next/static/chunks/1j0feqpmh6fhf.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/30d-un2oicmhe.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0_e8e66vbc81m.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1akodtrb0t-27.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0titma9j-a7ar.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1w6dk50xuzfko.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2cz8wkga9-dqm.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/00pyugee8ly1v.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0xwyo-vptg1nc.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2gy-n7s6f83ds.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/112qjy1w8koap.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/0sx9749urv_93.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/10gppqriqmn8w.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2jnp9xm5999w6.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm","/chat-static/_next/static/chunks/2tvg21ifnp81e.js?dpl=dpl_F9vBkyoqM48uJCbGntePvMUB8JDm"],"SWRDataProvider"] 8f:T131c,[V0_FILE]typescriptreact:file="components/terminal-demo.tsx" import { AnimatedSpan, Terminal, TypingAnimation } from "@/components/magicui/terminal" export default function TerminalDemo() { return ( > pnpm dlx shadcn@latest init ✔ Preflight checks. ✔ Verifying framework. Found Next.js. ✔ Validating Tailwind CSS. ✔ Validating import alias. ✔ Writing components.json. ✔ Checking registry. ✔ Updating tailwind.config.ts ✔ Updating app/globals.css ✔ Installing dependencies. ℹ Updated 1 file: - lib/utils.ts Success! Project initialization completed. You may now add components. ) } [V0_FILE]typescriptreact:file="components/magicui/terminal.tsx" "use client" import { cn } from "@/lib/utils" import { motion, type MotionProps } from "motion/react" import { useEffect, useRef, useState } from "react" interface AnimatedSpanProps extends MotionProps { children: React.ReactNode delay?: number className?: string } export const AnimatedSpan = ({ children, delay = 0, className, ...props }: AnimatedSpanProps) => ( {children} ) interface TypingAnimationProps extends MotionProps { children: string className?: string duration?: number delay?: number as?: React.ElementType } export const TypingAnimation = ({ children, className, duration = 60, delay = 0, as: Component = "span", ...props }: TypingAnimationProps) => { if (typeof children !== "string") { throw new Error("TypingAnimation: children must be a string. Received:") } const MotionComponent = motion.create(Component, { forwardMotionProps: true, }) const [displayedText, setDisplayedText] = useState("") const [started, setStarted] = useState(false) const elementRef = useRef(null) useEffect(() => { const startTimeout = setTimeout(() => { setStarted(true) }, delay) return () => clearTimeout(startTimeout) }, [delay]) useEffect(() => { if (!started) return let i = 0 const typingEffect = setInterval(() => { if (i < children.length) { setDisplayedText(children.substring(0, i + 1)) i++ } else { clearInterval(typingEffect) } }, duration) return () => { clearInterval(typingEffect) } }, [children, duration, started]) return ( {displayedText} ) } interface TerminalProps { children: React.ReactNode className?: string } export const Terminal = ({ children, className }: TerminalProps) => { return (

        {children}

) } 84:["$","$L8d",null,{"chatId":"zWcwWVkYNEM","children":["$","$L8e",null,{"data":{"@\"active-block\",\"zWcwWVkYNEM\",":{"id":"b_Brxom90SGD8","messageId":"IBfCAuRgH4kMmzJGUlaIP4ghCLiJ6tnM","source":"$8f","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Terminal Demo","type":"code-project","project":"Terminal Demo"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"zWcwWVkYNEM\",":false,"":null},"children":"$L90"}]}]

About

Tags

Share

About

Tags

Share

More from dillion

More Templates Like This